<template>
  <div>
    <div>
      <van-swipe @change="onChange" style="height: 800px;width: 400px;margin-top: 20px" v-if="!flag">
        <van-swipe-item v-for="image in images" :key="image">
          <img :src="image" style="width: 100%;height: 100%"/>
        </van-swipe-item>
      </van-swipe>
    </div>
    <template v-if="flag">
      <div style="margin: 0 auto;width: 150px;height: 50px"> 请进行身份选择</div>
      <div class="imgStyle">
        <img src="https://img0.baidu.com/it/u=590813379,726324057&fm=253&fmt=auto&app=138&f=JPEG?w=500&h=500" alt=""
             style="width: 100%;height: 100%" @click="toFarmer()">
        <van-button type="success" @click="toFarmer()" style="margin: 0 auto;display: block">果农</van-button>
      </div>
      <div class="imgStyle">
        <img src="https://img.ixintu.com/upload/jpg/20210523/9d66d0bc465b0def178f38a0ebc94ef0_47599_624_624.jpg%21con"
             alt=""
             style="width: 100%;height: 100%" @click="toStudent()">
        <van-button type="primary" @click="toStudent()" style="display: block;margin: 0 auto">学生</van-button>
      </div>
    </template>
  </div>
</template>
<script setup lang="ts">
import {ref} from "vue";

let flag = ref(false)

const images = [
  'https://img01-xusong.91q.com/ADEC477A-B58D-4D99-8100-45D7986260FA.jpg',
  'https://img01-xusong.91q.com/C996C3BE-797D-43F2-9073-34D0F70698B0.jpg',
  ''
];
const onChange = (index) => {
  if (index === 2) {
    flag.value = true
  }
}
const props = defineProps<{
  para: any
}>()
const emits = defineEmits(["start"])
//改变值
const toStudent = () => {
  emits("start", 2)
}
const toFarmer = () => {
  emits("start", 1)
}
</script>
<style scoped>
.imgStyle {
  width: 200px;
  height: 200px;
  margin: 60px auto;
}
</style>